<template>
	<view :style="colorStyle">
		<view class='distribution-posters'>
			<swiper :indicator-dots="indicatorDots"
				:autoplay="autoplay"
				:circular="circular"
				:interval="interval"
				:duration="duration"
				@change="bindchange"
				previous-margin="40px"
				next-margin="40px">
				<block v-for="(item, index) in spreadData"
					:key="index"
					class="img-list">
					<swiper-item class="aaa">
						<div class="box"
							ref="bill"
							:class="swiperIndex == index ? 'active' : 'quiet'">
							<view class="user-msg">
								<view class="user-code">
									<image class="canvas"
										:style="{ height: hg + 'px' }"
										:src="posterImage[index]"
										v-if="posterImage[index]"></image>
									<canvas class="canvas"
										:style="{ height: hg + 'px', width: wd + 'px' }"
										:canvas-id="'myCanvas' + index"
										v-else></canvas>
								</view>
							</view>
						</div>
						<!-- <image :src="item.wap_poster" class="slide-image" :class="swiperIndex == index ? 'active' : 'quiet'" mode='aspectFill' /> -->
					</swiper-item>
				</block>
			</swiper>
			<!-- #ifndef H5 -->
			<view class="picList acea-row row-center-wrapper">
				<view class="item"
					@click='savePosterPathMp(posterImage[swiperIndex])'>
					<view class="pictrue">
						<image src="../static/haibao.png"></image>
					</view>
					<view>保存海报</view>
				</view>
				<!-- #ifdef APP-PLUS -->
				<view class="item"
					@click="appShare('WXSceneSession')">
					<view class="pictrue">
						<image src="../static/weixin.png"></image>
					</view>
					<view>微信好友</view>
				</view>
				<!-- #endif -->
				<!-- #ifdef MP -->
				<button class="item"
					open-type="share"
					hover-class="none">
					<view class="pictrue">
						<image src="../static/weixin.png"></image>
					</view>
					<view>微信好友</view>
				</button>
				<!-- #endif -->
			</view>
			<!-- #endif -->
		</view>
		<view class="qrimg">
			<zb-code ref="qrcode"
				:show="codeShow"
				:cid="cid"
				:val="val"
				:size="size"
				:unit="unit"
				:background="background"
				:foreground="foreground"
				:pdground="pdground"
				:icon="icon"
				:iconSize="iconsize"
				:onval="onval"
				:loadMake="loadMake"
				@result="qrR" />
		</view>
	</view>
</template>

<script>
import zbCode from '@/components/zb-code/zb-code.vue'
import {
	getUserInfo,
	spreadBanner,
	userShare,
	routineCode,
	spreadMsg,
	imgToBase
} from '@/api/user.js';
import {
	toLogin
} from '@/libs/login.js';
import {
	mapGetters
} from "vuex";
import home from '@/components/home';
import {
	TOKENNAME,
	HTTP_REQUEST_URL
} from '@/config/app.js';
import colors from '@/mixins/color.js';
export default {
	components: {
		home,
		zbCode
	},
	mixins: [colors],
	data() {
		return {
			imgUrls: [],
			indicatorDots: false,
			posterImageStatus: true,
			circular: false,
			autoplay: false,
			interval: 3000,
			duration: 500,
			swiperIndex: 0,
			spreadList: [],
			userInfo: {},
			poster: '',
			isAuto: false, //没有授权的不会自动授权
			isShowAuth: false, //是否隐藏授权
			spreadData: [{}], //新海报数据
			nickName: "",
			siteName: "",
			mpUrl: "",
			canvasImageUrl: '',
			posterImage: [],
			//二维码参数
			codeShow: false,
			cid: '1',
			ifShow: true,
			val: "", // 要生成的二维码值
			size: 200, // 二维码大小
			unit: 'upx', // 单位
			background: '#FFF', // 背景色
			foreground: '#000', // 前景色
			pdground: '#000', // 角标色
			icon: '', // 二维码图标
			iconsize: 40, // 二维码图标大小
			lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
			onval: true, // val值变化时自动重新生成二维码
			loadMake: true, // 组件加载完成后自动生成二维码
			src: '', // 二维码生成后的图片地址或base64
			codeSrc: "",
			wd: 305,
			hg: 473,
			qrcode: ""
		};
	},
	computed: mapGetters({
		'isLogin': 'isLogin',
		'userData': 'userInfo',
		'uid': 'uid'
	}),
	watch: {
		isLogin: {
			handler: function (newV, oldV) {
				if (newV) {
					this.userSpreadBannerList();
				}
			},
			deep: true
		},
		userData: {
			handler: function (newV, oldV) {
				if (newV) {
					this.$set(this, 'userInfo', newV);
				}
			},
			deep: true
		}
	},
	async onReady() {
		if (this.isLogin) {
			this.val = `${HTTP_REQUEST_URL}?spid=${this.uid}`
			// #ifdef MP
			await this.spreadMsg()
			// #endif
			this.getUser();
		} else {
			this.getIsLogin();
		}
	},
	onShow() {
		uni.removeStorageSync('form_type_cart');
		this.$nextTick(() => {
			let selector = uni.createSelectorQuery().select('.aaa');
			selector.fields({
				size: true
			}, data => {
				console.log(data)
				this.wd = data.width
				// this.hg = data.height
			}).exec();
		})
	},
	/**
	 * 用户点击右上角分享
	 */
	// #ifdef MP
	onShareAppMessage() {
		return {
			title: this.userInfo.nickname + '-分销海报',
			imageUrl: this.spreadList[0],
			path: '/pages/index/index?spid=' + this.userInfo.uid,
		};
	},
	// #endif
	methods: {
		getIsLogin() {
			toLogin()
		},
		onLoadFun() {
			this.spreadMsg();
			this.getUser();
			this.userSpreadBannerList();
			this.isShowAuth = false;
		},
		getUser() {
			getUserInfo().then(res => {
				this.userInfo = res.data
			})
		},
		async qrR(res) {
			this.codeSrc = await res
			// #ifdef H5 || APP-PLUS
			this.spreadMsg()
			// #endif
		},
		//获取图片
		async spreadMsg() {
			let res = await spreadMsg()
			this.spreadData = res.data.spread
			this.nickName = res.data.nickname
			this.siteName = res.data.site_name
			uni.showLoading({
				title: '海报生成中',
				mask: true
			});
			for (let i = 0; i < res.data.spread.length; i++) {
				let that = this
				let arr2 = [];
				let img = await this.imgToBase(res.data.spread[i].pic);
				let avatar = await this.imgToBase(res.data.avatar);
				let followCode = res.data.qrcode ? await this.imgToBase(res.data.qrcode) : '';
				// #ifdef H5
				avatar = avatar ? avatar : res.data.avatar
				arr2 = [followCode || this.codeSrc, img, avatar]
				// #endif
				// #ifdef MP
				await this.routineCode();
				img = await this.downloadFilestoreImage(res.data.spread[i].pic);
				avatar = await this.downloadFilestoreImage(res.data.avatar);
				arr2 = [this.mpUrl, img, avatar]
				// #endif
				// #ifdef APP-PLUS
				img = await this.downloadFilestoreImage(res.data.spread[i].pic);
				avatar = await this.downloadFilestoreImage(res.data.avatar);
				arr2 = [this.codeSrc, img, avatar]
				// #endif
				this.$nextTick(function () {
					that.$util.userPosterCanvas(arr2, res.data.nickname, res.data.site_name, i, this.wd, this.hg, (
						tempFilePath) => {
						that.$set(that.posterImage, i, tempFilePath);
						// #ifdef MP
						if (!that.posterImage.length) {
							return that.$util.Tips({
								title: '小程序二维码需要发布正式版后才能获取到'
							});
						}
						// #endif
					});
				})
			}
			uni.hideLoading();
		},
		// #ifdef MP
		async routineCode() {
			let res = await routineCode()
			this.mpUrl = await this.downloadFilestoreImage(res.data.url);
		},
		// #endif
		async imgToBase(url) {
			let res = await imgToBase({
				image: url
			})
			return res.data.image
		},
		// 授权关闭
		authColse: function (e) {
			this.isShowAuth = e
		},
		bindchange(e) {
			let spreadList = this.spreadList;
			this.swiperIndex = e.detail.current;
		},
		// #ifdef MP
		savePosterPathMp(url) {
			let that = this;
			uni.getSetting({
				success(res) {
					if (!res.authSetting['scope.writePhotosAlbum']) {
						uni.authorize({
							scope: 'scope.writePhotosAlbum',
							success() {
								uni.saveImageToPhotosAlbum({
									filePath: url,
									success: function (res) {
										that.$util.Tips({
											title: '保存成功',
											icon: 'success'
										});
									},
									fail: function (res) {
										that.$util.Tips({
											title: '保存失败'
										});
									}
								});
							}
						});
					} else {
						uni.saveImageToPhotosAlbum({
							filePath: url,
							success: function (res) {
								that.$util.Tips({
									title: '保存成功',
									icon: 'success'
								});
							},
							fail: function (res) {
								that.$util.Tips({
									title: '保存失败'
								});
							}
						});
					}
				}
			});
		},
		// #endif
		// #ifdef APP-PLUS
		savePosterPathMp(url) {
			let that = this;
			uni.saveImageToPhotosAlbum({
				filePath: url,
				success: function (res) {
					that.$util.Tips({
						title: '保存成功',
						icon: 'success'
					});
				},
				fail: function (res) {
					that.$util.Tips({
						title: '保存失败'
					});
				}
			});
		},
		appShare(scene) {
			let that = this
			uni.share({
				provider: "weixin",
				scene: scene,
				type: 0,
				href: '/pages/index/index?spid=' + this.userInfo.uid,
				title: this.userInfo.nickname + '-分销海报',
				imageUrl: this.spreadList[0],
				success: function (res) {
					// uni.showToast({
					// 	title: '分享成功',
					// 	icon: 'success'
					// })
					// that.posters = false;
				},
				fail: function (err) {
					uni.showToast({
						title: '分享失败',
						icon: 'none',
						duration: 2000
					})
				}
			});
		},
		// #endif
		//图片转符合安全域名路径
		downloadFilestoreImage(url) {
			return new Promise((resolve, reject) => {
				let that = this;
				uni.downloadFile({
					url: url,
					success: function (res) {
						resolve(res.tempFilePath);
					},
					fail: function () {
						return that.$util.Tips({
							title: ''
						});
					}
				});
			})
		},
		setShareInfoStatus: function () {
			if (this.$wechat.isWeixin()) {
				if (this.isLogin) {
					getUserInfo().then(res => {
						let configAppMessage = {
							desc: '分销海报',
							title: res.data.nickname + '-分销海报',
							link: '/pages/index/index?spid=' + res.data.uid,
							imgUrl: this.spreadList[0]
						};
						this.$wechat.wechatEvevt(["updateAppMessageShareData", "updateTimelineShareData"],
							configAppMessage)
					});
				} else {
					this.getIsLogin();
				}

			}
		},
		userSpreadBannerList: function () {
			let that = this;
			uni.showLoading({
				title: '获取中',
				mask: true,
			})
			spreadBanner().then(res => {
				uni.hideLoading();
				that.$set(that, 'spreadList', res.data);
				that.$set(that, 'poster', res.data[0].poster);
				// #ifdef H5
				that.setShareInfoStatus();
				// #endif
			}).catch(err => {
				uni.hideLoading();
			});
		}
	}
}
</script>

<style lang="scss">
page {
	background-color: #F5F5F5 !important;
}

.canvas {
	width: 100%;
	// height: 550px;
}

.picList {
	margin-top: 30rpx;

	.item {
		font-size: 26rpx;
		color: #666666;
		margin: 0 71rpx;
		background-color: #f5f5f5;

		.pictrue {
			width: 96rpx;
			height: 96rpx;
			margin-bottom: 24rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}
}

.box {
	width: 100%;
	height: 100%;
	position: relative;
	border-radius: 32rpx;
	overflow: hidden;

	.user-msg {
		position: absolute;
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;

		.user-code {
			width: 100%;
			// height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			justify-content: space-between;

			image {
				width: 100%;
				border-radius: 16px;
			}
		}
	}
}

.img-list {
	margin-right: 40px;
}

.distribution-posters swiper {
	width: 100%;
	height: 1000rpx;
	position: relative;
	margin-top: 40rpx;
}

.distribution-posters .slide-image {
	width: 100%;
	height: 100%;
	margin: 0 auto;
	border-radius: 15rpx;
}

.distribution-posters /deep/.active {
	transform: none;
	transition: all 0.2s ease-in 0s;
}

.distribution-posters /deep/ .quiet {
	transform: scale(0.89);
	transition: all 0.2s ease-in 0s;
}

.distribution-posters .keep {
	font-size: 30rpx;
	color: #fff;
	width: 600rpx;
	height: 80rpx;
	border-radius: 50rpx;
	text-align: center;
	line-height: 80rpx;
	margin: 38rpx auto;
}

.distribution-posters .preserve {
	color: #fff;
	text-align: center;
	margin-top: 38rpx;
}

.distribution-posters .preserve .line {
	width: 100rpx;
	height: 1px;
	background-color: #fff;
}

.distribution-posters .preserve .tip {
	margin: 0 30rpx;
}
</style>
